<template>
  <div class="form-container">
    <div class="logo-container">
      <img src="@/assets/ourLogo.png" class="logo" />
    </div>
    <el-form :model="form" ref="registerForm" class="register-form">
      <el-form-item label="选择注册类型">
        <el-radio-group v-model="registerType">
          <el-radio label="enterprise">企业注册</el-radio>
          <el-radio label="jobSeeker">求职者注册</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 根据注册类型显示不同的输入框 -->
      <el-form-item v-if="registerType === 'enterprise'" label="企业名称" prop="enterpriseName">
        <el-input v-model="form.enterpriseName" placeholder="请输入企业名称"></el-input>
      </el-form-item>

      <el-form-item v-if="registerType === 'jobSeeker'" label="求职者姓名" prop="seekerName">
        <el-input v-model="form.seekerName" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="电话号码" prop="tel">
        <el-input v-model="form.tel" placeholder="请输入电话号码"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item v-if="registerType === 'jobSeeker'" label="性别" prop="seekerGender">
        <el-select v-model="form.seekerGender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import md5 from 'js-md5';

export default {
  name: 'Register',
  data() {
    return {
      form: {
        enterpriseName: '',
        seekerName: '',
        tel: '',
        password: '',
        seekerGender: ''
      },
      registerType: 'jobSeeker', // 默认选择求职者注册
      externalInputValue: '' // 示例：外部输入框的值
    };
  },
  methods: {
    async register() {
      this.form.password = md5(this.form.password);
      this.$refs.registerForm.validate(async valid => {
        if (!valid) return;
        try {
          const endpoint = this.registerType === 'enterprise' ? '/enterprise/addEnterprise' : '/seeker/addSeeker';
          const { data: res } = await this.$axios.post(endpoint, this.form);
          if (res > 0) {
            const successMessage = this.registerType === 'enterprise' ? '企业注册成功' : '求职者注册成功';
            this.$message.success(successMessage);
            this.$router.push('/login');
          } else {
            const errorMessage = this.registerType === 'enterprise' ? '企业注册失败' : '求职者注册失败';
            this.$message.error(errorMessage);
          }
        } catch (error) {
          console.error(error);
          const errorMessage = this.registerType === 'enterprise' ? '企业注册失败，请稍后重试' : '求职者注册失败，请稍后重试';
          this.$message.error(errorMessage);
        }
      });
    }
  }
};
</script>

<style>
.form-container {
  display: flex;
  height: 100vh;
  background: url('@/assets/back.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 20px;
  align-items: center;

}
.register-form {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background: white;
}
.logo-container {
  width: 600px;
  height: 600px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  max-width: 80%;
  height: auto;
}

</style>
